<template>
  <div class="login">
    <LoginBanner class="login__banner" />
    <div class="login__content">
      <div class="login__content__login-form">
        <LoginForm />
      </div>
      <div class="login__content__footer">
        <Footer />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Footer from "@/components/layouts/footer.vue";
import LoginBanner from "@/components/login/banner.vue";
import LoginForm from "@/components/login/login-form.vue";

</script>

<style lang="scss" scoped>
.login {
  display: flex;
  height: 100vh;

  &__banner {
    width: 50%;
    background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
  }

  &__content {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;

    &__footer {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
    }
  }
}
</style>

<style lang="scss" scoped>
// responsive
@media (max-width: 768px) {
  .login__banner {
    display: none;
  }
}
</style>
